<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业24</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            background-color: #dddddd;
        }
        #bg{
            width: 600px;
            height: 500px;
            background-color: white;
            border-radius: 15px;
            border: 1px solid white;
            box-shadow: 0px 0px 100px 20px white;
            position: absolute;
            margin: auto;
            left: 35%;
            top: 20%;
            display: none;
            z-index: 10000;
        }
        #header{
            height: 20px;
            padding: 10px;
            background-color: #6b80ff;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
        span:first-child{
            color: #FFFFFF;
        }
        span:last-child{
            color: #dddddd;
        }
        #right{
            float: right;
            margin-right: 5px;
        }
        #right div{
            float: left;
            margin-left: 10px;
            color: white;
            cursor: pointer;
        }
        #jsq{
            width: 600px;
            text-align: center;
            margin: 30px auto;
        }
        #math{
            width: 420px;
            height: 410px;
            background-color: #656565;
            margin:30px auto ;
            padding: 30px;
            border-radius: 20px;
            display: none;
        }
        .sz{
            width: 80px;
            height: 80px;
            background-color: #FFFFFF;
            text-align: center;
            font-size: 35px;
            color: blue;
            position: relative;
        }
        #gn1,#gn2,#gn3,#gn4{
            width: 100px;
            height: 80px;
            background-color: #6b80ff;
            font-size: 30px;
            color: white;
            position: relative;
        }
        #math div{
            cursor: pointer;
            float: left;
            margin: 10px;
            line-height: 80px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 5px 5px 10px black;
            font-weight: bold;
        }
        #srk{
            width: 500px;
            height: 30px;
            font-size: 25px;
        }
        span:last-child{
            color: #dddddd;
        }
    </style>
</head>
<body>
<!--弹出弹框-->
<input type="button" value="弹出弹窗" id="tan">
<div id="bg">
    <div id="header">
        <span>新建弹窗</span>
        <div id="right">
            <div id="small">一</div>
            <div id="up">口</div>
            <div>X</div>
        </div>
    </div>
    <span>我的弹窗demo</span>
</div>
<!--虚拟键盘-->
<div id="jsq">
    <input type="text" id="srk">
    <div id="math">
        <div class="sz">1</div>
        <div class="sz">2</div>
        <div class="sz">3</div>
        <div id="gn1" style="background-color: red">退出</div>
        <div class="sz">4</div>
        <div class="sz">5</div>
        <div class="sz">6</div>
        <div id="gn2" style="background-color: orange">退格</div>
        <div class="sz">7</div>
        <div class="sz">8</div>
        <div class="sz">9</div>
        <div id="gn3" style="background-color: #18b3f0;">清除</div>
        <div class="sz">0</div>
        <div class="sz">.</div>
        <div id="gn4" style="width: 200px;background-color: green">确定</div>
    </div>
</div>
<script>
    //弹出弹框
    $("#tan").click(function () {
        $("#bg").fadeIn(500)
    })
    $("#header").mousedown(function (e) {
        var offset = $(this).parent().position();
        var X = e.pageX-offset.left;
        var Y = e.pageY-offset.top;
        $(document).on("mousemove",function (ee) {
            var x = ee.pageX-X;
            var y = ee.pageY-Y;
            if (e.which==1){
                $("#bg").css({
                    "left":x+"px",
                    "top":y+"px"
                })
            }
        })
    })
    $("#header").mouseup(function () {
        $(document).off("mousemove");
    });
    $(document).on("click","#up",function () {
        $("#bg").animate({
            "left":"0px",
            "top":"0px",
            "width":"100%",
            "height":"100%",
            "margin":"0"
        },700)
        $("#right div:first-child").after($("<div id='low'>口</div>"))
        $("#up").remove()
    })
    $(document).on("click","#low",function () {
        $("#bg").animate({
            "left":"35%",
            "top":"20%",
            "width":"600px",
            "height":"500px",
            "margin":"0"
        },700)
        $("#right div:first-child").after($("<div id='up'>口</div>"))
        $("#low").remove()
    })
    $(document).on("click","#small",function () {
        $("#bg").animate({
            height:'40px'
        },700)
        $("#bg").animate({
            width:'300px'
        },700)
        $("span:last-child").fadeOut()
        $("#right div:first-child").after($("<div id='da'>一</div>"))
        $("#small").remove()
    })
    $(document).on("click","#da",function () {
        $("#bg").animate({
            width:'600px'
        },700)
        $("#bg").animate({
            height:'500px',
        },700)
        $("span:last-child").fadeIn()
        $("#right div:first-child").after($("<div id='small'>一</div>"))
        $("#da").remove()
    })
    $("#right div:last-child").click(function () {
        $("#bg").fadeOut(500)
    })
    //虚拟键盘
    $("#srk").focus(function () {
        $("#math").fadeIn(500)
    })
    $("#gn1").click(function () {
        $("#math").fadeOut(500)
        $(this).animate({top:'+=3px'},100)
        $(this).animate({top:'-=3px'},"slow")
    })
    $("#gn2").click(function () {
        $("#srk").val($("#srk").val().substring(0,$("#srk").val().length-1))
        $(this).animate({top:'+=3px'},100)
        $(this).animate({top:'-=3px'},"slow")
    })
    $("#gn3").click(function () {
        $("#srk").val("")
        $(this).animate({top:'+=3px'},100)
        $(this).animate({top:'-=3px'},"slow")
    })
    $("#gn4").click(function () {
        $("#math").fadeOut(500)
        $(this).animate({top:'+=3px'},100)
        $(this).animate({top:'-=3px'},"slow")
    })
    $(".sz").click(function () {
        $("#srk").val($("#srk").val()+$(this).text());
        $(this).animate({top:'+=3px'},100)
        $(this).animate({top:'-=3px'},"slow")
    })
</script>
</body>
</html>